{# 继承母版页basic #}
{% extends 'basic.html' %}
{% load static %}

{# 自定义标题 #}
{% block title %}
    我的博客|注册
{% endblock %}

{# 导航条选中 #}
{% block nav_home_active %} active {% endblock %}

{# 自定义内容 #}
{% block content %}
     <div class="container">
        <div class="row">
            <div class="col-xs-4 col-xs-offset-4">
            {% if not user.is_authenticated %}
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">注册</h3>
                    </div>
                    <div class="panel-body">
                        <form action="" method="POST">
                            {% csrf_token %}
                            {% for field in reg_form %}
                                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                {{ field }}
                                <p class="text-danger">{{ field.errors.as_text }}</p>
                            {% endfor %}
                            <span class="pull-left text-danger">{{ reg_form.non_field_errors.0 }}</span>
                            <div class="clearfix"></div>
                            <button id="send_code" class="btn btn-primary pull-left">发送验证码</button>
                            <input type="submit" value="注册" class="btn btn-primary pull-right">
                        </form>
                    </div>
                </div>
            {% else %}
                    <span>已登录，跳转到首页...</span>
                    <script type="text/javascript">
                        window.location.href = '/';
                    </script>
            {% endif %}
            </div>
        </div>
    </div>
{% endblock %}}

{# 自定义js #}
{% block js %}
    <script type="text/javascript">
        $("#send_code").click(function(){
            var email = $("#id_email").val();
            if(email==""){
                $("#tip").text('* 邮箱不能为空');
                return false;
            }

            // 发送验证码
            $.ajax({
                url: "{% url 'send_verification_code' %}",
                type: "GET",
                data: {
                    'email': email,
                    'send_for': 'register_code',
                },
                cache: false,
                success: function(data){
                    if(data['status']=='ERROR'){
                        alert(data['status']);
                    }
                }
            });

            // 把按钮变灰
            $(this).addClass('disabled');
            $(this).attr('disabled', true);
            var time = 30;
            $(this).text(time + 's');
            var interval = setInterval(() => {
                if(time <= 0){
                    clearInterval(interval);
                    $(this).removeClass('disabled');
                    $(this).attr('disabled', false);
                    $(this).text('发送验证码');
                    return false;
                }

                time --;
                $(this).text(time + 's');
            }, 1000);
        });
    </script>
{% endblock %}